<template name="businessInfo">
	<view class="indexC">
		<image :src="$isHttp(info.background)" class="response bgc" :class="{ 'bg': info.background === null }"></image>
		<scroll-view scroll-y class="page">
			<cu-custom :isdw="true">
				<block slot="dw">
					<view class="flex" @click="$navigateBack()"><text class=" text-bold text-gray cuIcon-home" style="font-size: 50rpx;"></text></view>
				</block>
				<block slot="content"><view class=" text-white text-center">商家后台管理</view></block>
			</cu-custom>

			<view>
				<view class="center">
					<swiper class="screen-swiper1 margin-xs radius18" :indicator-dots="true" :circular="true" :autoplay="true" :current="current" interval="5000" duration="500">
						<swiper-item v-for="(item, index) in Carousel" :key="index" style="position: relative;">
							<image :src="$isHttp(item.picture)" mode="aspectFill" style="width: 100%;height: 100%;"></image>
							<video :src="$isHttp(item.picture)" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type == 'video'"></video>
							<view class="cu-tag bg-yellow" style="position: absolute;right: 0;bottom: 0;" @click.stop="addStoreCarousel">添加</view>
							<view class="cu-tag bg-red" style="position: absolute;right: 0; top: 0;" @click.stop="deleteStoreCarousel(item.id,index)">删除</view>
						</swiper-item>
					</swiper>
					
					<view class="cu-card">
						<view class="margin-xs radius12 padding-sm" style="background-color: #292929;position: relative;">
							<view class="flex justify-between">
								<image :src="$isHttp(info.picture)" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;" mode="aspectFill"></image>
								<view class=" margin-left-sm" style="width: 430rpx;">
									<view class="flex justify-between margin-top-xs">
										<view class="text-bold text-lg text-white">{{ info.store_name }}</view>
									</view>
									<view class="margin-top-sm text-gray text-sm">{{ info.city }}{{ info.region }}{{ info.address }}</view>
									<view class="margin-top-sm flex justify-between" style="color: #b2b1b6;">
										<view class="text-sm solid round">
											共上架
											<text class="text-green">{{ info.playcount }}</text>
											个剧本
										</view>
									</view>
								</view>
								<view @click="$goPage('../BusinessInformationManagement/BusinessInformationManagement')" class="cu-tag bg-yellow  sm round margin-left-sm">
									修改
								</view>
							</view>
						</view>
					</view>

					<view class="cu-list grid margin-xs radius12" style="background-color: rgba(255, 255, 255, 0.7);" :class="['col-' + gridCol, gridBorder ? '' : 'no-border']">
						<view class="cu-item" v-for="(item, index) in cuIconList" :key="index" v-if="index < gridCol * 2" @click="menuClick(item.link)">
							<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
								<view class="cu-tag badge" v-if="item.badge != 0">
									<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
								</view>
							</view>
							<text class="" style="color: #333;">{{ item.name }}</text>
						</view>
					</view>

					<!-- <view class="flex margin-xs justify-between align-center">
						<view class="text-df text-white text-bold margin-bottom-sm">
							<text class="cuIcon-titles text-orange"></text>热门剧本
						</view>
						<view class="text-white">更多<text class="lg text-gray cuIcon-right"></text></view>
					</view>
					<ls-swiper :list="base_lsit" imgKey="imgUrl" imgWidth='100%' :crown="true" :loop="true"
						:shadow='true' height='200' previousMargin="220" nextMargin='220' imgRadius="5" />
					<view class="margin-xs radius padding-sm" style="background-color: rgba(0,0,0,0.5);">
						<view class="flex text-white" @click="phone">门店电话：<a>{{info.telephone}}</a><text
								class="lg margin-left-sm text-red cuIcon-dianhua"></text></view>
						<view class="text-white" @click="map">门店地址：{{info.city}}{{info.region}}{{info.address}}</view>
					</view> -->

					<view class="news  margin-xs">
						<view class="tp">最新情报</view>
						<view class="news1 radius">
							<van-notice-bar class="radius" color="#fff" backgroundColor="rgba(0,0,0,0.5)" :scrollable="true" :text="info.information" />
						</view>
					</view>

					<view class="margin-xs dm supporter radius padding-xs">
						<view class="text-df text-white text-bold margin-top-xs margin-bottom-sm">
							<text class="cuIcon-titles text-orange"></text>
							本店主持人
							<text @click="$goPage('../HostManagement/addHost')" class="cu-tag round bg-yellow  margin-lr-sm">新增</text>
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view
								@click="$goPage('../HostManagement/HostManagement?id=' + item.id)"
								v-for="(item, index) in PresentList"
								:key="item.id"
								class="cu-card dm-item scroll-view-item_H radius"
								style="position: relative;"
							>
								<image :src="$isHttp(item.picture)" mode="aspectFill"></image>
								<view class="text">
									<!-- <view class="tj1 cu-tag radius sm text-white"><text
											class="lg text-white cuIcon-hot"></text>1234</view> -->
									<view class="text-sm text-black padding_le_10 text-cut margin-top-xs">{{ item.name }}</view>
									<view class="text-sm text-grey padding_le_10 text-cut margin-top-xs">开本场次：{{ item.presentCount }}</view>
								</view>
								<view @click.stop="delHost(item.id, index)" class="cu-tag bg-red" style="position: absolute;top: 0;right: 0;z-index: 1;">删除</view>
								<view @click.stop="editHost(item.id, index)" class="cu-tag bg-yellow" style="position: absolute;top: 0;left: 0;z-index: 1;margin-left: 0;">
									编辑
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="margin-xs dm supporter radius padding-xs">
						<view class="text-df text-white text-bold margin-top-xs margin-bottom-sm">
							<text class="cuIcon-titles text-orange"></text>
							房间管理
							<text @click="$goPage('../RoomManagement/addRoom')" class="cu-tag round bg-yellow  margin-lr-sm">新增</text>
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view
								@click="$goPage('../RoomManagement/RoomManagement?id=' + item.roomId)"
								v-for="(item, index) in RoomList"
								:key="item.roomId"
								class="cu-card dm-item scroll-view-item_H radius"
								style="position: relative;"
							>
								<image :src="$isHttp(item.picture)" mode="aspectFill"></image>
								<view class="text">
									<!-- <view class="tj1 cu-tag radius sm text-white"><text
											class="lg text-white cuIcon-hot"></text>1234</view> -->
									<view class="text-sm text-black padding_le_10 text-cut margin-top-xs">{{ item.name }}</view>
									<view class="text-sm text-grey padding_le_10 text-cut margin-top-xs">房号：{{ item.number }}</view>
								</view>
								<view @click.stop="delRoom(item.roomId, index)" class="cu-tag bg-red" style="position: absolute;top: 0;right: 0;z-index: 1;">删除</view>
								<view @click.stop="editRoom(item.roomId, index)" class="cu-tag bg-yellow" style="position: absolute;top: 0;left: 0;z-index: 1;margin-left: 0;">
									编辑
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>

			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<van-popup
		  :show="modalName==='scanCode'"
		  round
		  @click-overlay="modalName=''"
		  @close="modalName=''">
		  
		  <view class="padding">
			  <input type="text" v-model="verification" :focus="modalName==='scanCode'?true:false" placeholder="请输入核销码" placeholder-style="padding-left:20rpx" class="radius12 solids text-lg" style="height: 90rpx;" />
			  <view class="flex justify-between margin-top-sm">
				  <view class="cu-btn round bg-black" @click="scan">扫码</view>
				  <view class="cu-btn round bg-yellow" @click="$goPage('../CarpoolManagement/WriteInfo?verification='+verification);modalName='';verification=''">确认</view>
			  </view>
		  </view>
		</van-popup>
	</view>
</template>

<script>
	import { baseUrl } from '../../initial.js';
import lsSwiper from '../../components/ls-swiper/index.vue';
export default {
	name: 'businessInfo',
	components: {
		lsSwiper
	},
	data() {
		return {
			modalName: '',
			info: '', //商家信息
			Carousel:[{picture:'1',id:-100}],
			current:0,
			PresentList: [], //主持人列表
			RoomList: [],
			cuIconList: [
				{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 0,
					link: '../ScriptManagement/ScriptManagement',
					name: '剧本管理'
				},
				{
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 0,
					link: '../BalanceManagement/BalanceManagement',
					name: '余额管理'
				},
				{
					cuIcon: 'picfill',
					color: 'orange',
					badge: 0,
					link: '../CarpoolManagement/CarpoolManagement',
					name: '拼车管理'
				},
				{
					cuIcon: 'taxi',
					color: 'brown',
					badge: 0,
					link: '../CarpoolManagement/InitiateCarpooling',
					name: '发起拼车'
				},
				{
					cuIcon: 'scan',
					color: 'black',
					badge: 0,
					link: 'scanCode',
					name: '核销扫码'
				},
				{
					cuIcon: 'pullright',
					color: 'mauve',
					badge: 0,
					link: '../RefundManagement/RefundManagement',
					name: '退款管理'
				}
			],
			gridCol: 3,
			gridBorder: false,


			verification:''//核销码
		};
	},
	onLoad(option) {
		this.$u.vuex('vuex_bussinessId', option.id);
	},
	onShow() {
		this.$u.adminApi
			.getStoreInfo({
				storeId: this.vuex_bussinessId
			})
			.then(res => {
				this.info = res.data;
			});
		this.$u.adminApi
			.getStoreCarousel({
				storeId: this.vuex_bussinessId
			})
			.then(res => {
				if(res.code==200 && res.data.length>0){
				this.Carousel = res.data;
				}
			});
		this.$u.adminApi
			.getStorePresentList({
				storeId: this.vuex_bussinessId
			})
			.then(res => {
				this.PresentList = res.data;
			});
		this.$u.adminApi
			.getRoomList({
				storeId: this.vuex_bussinessId
			})
			.then(res => {
				this.RoomList = res.data;
			});
	},
	onUnload() {
		this.$u.vuex('vuex_bussinessId', '');
	},
	methods: {
		async addStoreCarousel(){
			let filePath
			await new Promise(async reject => {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async res => {
						filePath=res.tempFilePaths[0]
						reject()
					}
				});
			});
			let itemImg
			await new Promise(async reject=>{
				uni.uploadFile({
					url: baseUrl + '/store/upload', 
					filePath: filePath,
					name: 'file',
					header: {
						Authorization: 'Bearer ' + this.vuex_token
					},
					formData: {
						select: 6
					},
					success: async uploadFileRes => {
						itemImg=JSON.parse(uploadFileRes.data).data
						reject()
					}
				});
			})
			this.$u.adminApi.addStoreCarousel({
				storeId:this.vuex_bussinessId,
				array:[itemImg]
			}).then(res=>{
				if(res.code===200){
					this.Carousel.push(res.data)
					this.current=this.Carousel.length-1
					this.$successToast(res.message)
				}
			})
		},
		deleteStoreCarousel(id,index){
			this.$u.adminApi.deleteStoreCarousel({
				pictureId:id
			}).then(res=>{
				if(res.code===200){
					this.Carousel.splice(index,1)
					this.$successToast(res.message)
				}
			})
		},
		menuClick(link) {
			if (link === 'scanCode') {
				// 只允许通过相机扫码
				this.modalName='scanCode'
				return;
			}
			this.$goPage(link);
		},
		scan(){
			this.modalName=''
			uni.scanCode({
				onlyFromCamera: true,
				success: res => {
					this.$goPage('../CarpoolManagement/WriteInfo?verification=' + res.result);
				}
			});
		},
		async map() {
			//地理编码，获取经纬度
			let re = await uni.request({
				//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
				url: 'https://restapi.amap.com/v3/geocode/geo?parameters?output=JSON&address=' + this.info.address + '&key=7b7fbe6751d2491c692a1728a6c7afa4'
			});
			let location = re[1].data.geocodes[0].location.split(',');
			await uni.openLocation({
				latitude: parseFloat(location[1]),
				longitude: parseFloat(location[0]),
				name: this.info.store_name,
				address: this.info.address,
				success: function() {
					console.log('success');
				}
			});
		},
		phone() {
			uni.makePhoneCall({
				phoneNumber: this.info.telephone //仅为示例
			});
		},
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		editHost(id, index) {
			uni.navigateTo({
				url: '../HostManagement/addHost?id=' + id
			});
		},
		delHost(id, index) {
			uni.showModal({
				title: '提示',
				content: '确认删除该主持人吗',
				success: res => {
					if (res.confirm) {
						this.$u.adminApi
							.delPresent({
								presentId: id
							})
							.then(res => {
								if (res.code == 200) {
									this.PresentList.splice(index, 1);
									this.$textToast('删除成功');
								}
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		editRoom(id, index) {
			uni.navigateTo({
				url: '../RoomManagement/addRoom?id=' + id
			});
		},
		delRoom(id, index) {
			uni.showModal({
				title: '提示',
				content: '确认删除该房间吗',
				success: res => {
					if (res.confirm) {
						this.$u.adminApi
							.delRoom({
								roomId: id
							})
							.then(res => {
								if (res.code == 200) {
									this.RoomList.splice(index, 1);
									this.$textToast('删除成功');
								}
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
// 主持人
.supporter {
	background-color: rgba($color: #ffffff, $alpha: 0.1);
}

.padding_top_5 {
	padding-top: 5rpx;
}

.padding_le_10 {
	padding-left: 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}

// DM推荐
.dm {
	width: auto;

	.dm-item {
		width: 240rpx;
		height: 420rpx;
		background-color: #fff;
		margin-left: 15rpx;
		overflow: hidden;

		&:nth-child(1) {
			margin-left: 0;
		}

		image {
			width: 100%;
			height: 75%;
		}

		.text {
			height: 25%;
			position: relative;

			.tj {
				height: 40rpx;
				width: 50%;
				border-radius: 0 100rpx 0 0;
				background-color: #fff;
				position: absolute;
				left: 0;
				top: -40rpx;
			}

			.tj1 {
				height: 30rpx;
				width: auto;
				border-radius: 10rpx;
				background-color: rgba($color: #939393, $alpha: 0.6);
				position: absolute;
				left: 10rpx;
				top: -60rpx;
			}
		}
	}
}

.screen-swiper2 {
	height: 160rpx;
	overflow: hidden;

	swiper-item {
		box-sizing: border-box;
	}
}

.screen-swiper2 image,
.screen-swiper2 video,
.swiper-item image,
.swiper-item video {
	width: 100rpx;
	display: block;
	height: 130rpx;
	margin: 0;
	pointer-events: none;
	border-radius: 10rpx;
}

// 最新情报
.news {
	position: relative;
	height: 80rpx;
	margin-top: 33rpx;

	.tp {
		width: 120rpx;
		height: 40rpx;
		background-color: #6c5341;
		color: #c2955a;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		border-radius: 15rpx 0 15rpx 0;
		position: absolute;
		top: -20rpx;
		left: 10rpx;
	}

	.news1 {
		overflow: hidden;
		// background-color: rgba($color: #000000, $alpha: 0.5);
	}
}

.Scriptlist {
	width: 340rpx;
	height: 350rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
	position: relative;

	.bg {
		width: 100%;
		height: 262rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

.Scriptlist1 {
	width: 340rpx;
	height: 195rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
}

.Scriptlist2 {
	width: 340rpx;
	height: 145rpx;
	margin-top: 10rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
}

.center {
	height: auto;
	// margin-top: 200rpx;
	padding: 0 20rpx;

	.screen-swiper1 {
		height: 300rpx;
		overflow: hidden;

		swiper-item {
			width: 100% !important;
		}

		.screen-swiper1 image,
		.screen-swiper1 video,
		.swiper-item1 image,
		.swiper-item1 video {
			// width: 100%;
			// display: block;
			// height: 100%;
			// margin: 0;
			// pointer-events: none;
		}
	}
}

.dwt {
	font-size: 28rpx;
	font-weight: 600;
	color: #fff;
}

.indexC {
	position: relative;
}

.page {
	height: 100vh;
}

.bgc {
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}

.bg {
	background-color: #5f3d3d;
}
</style>
